<script setup lang="ts">
import HyForm from '@/common/hy-form/src/HyForm.vue'
import { useOperate } from '@/stores/operate'
import { IFormItem } from '@/common/hy-form'
import SvgIcon from '@/common/svg-icon/SvgIcon.vue'

const Router = useRouter()
const operateState = useOperate() // 操作仓库
const form = ref({ ...operateState.form }) // 当前表单
const type = ref(operateState.type) // 当前表单类型
const publicArr = [
  {
    label: '销售',
    value: 1
  },
  {
    label: '求购',
    value: 2
  }
] // 发布类型集合
const disabled = computed(() => {
  return type.value !== 2
}) // 判断当前是否可以编辑
const itemStyle = {
  marginRight: '15px',
  display: 'flex',
  flexDirection: 'column'
} // 表单基础样式
const formProps = ref<Array<IFormItem>>([
  {
    type: 'select',
    field: 'type',
    label: '发布类型',
    options: publicArr,
    otherOptions: {
      disabled: disabled
    }
  },
  {
    type: 'input',
    field: 'phone',
    label: '联系电话',
    otherOptions: {
      disabled: disabled
    }
  },
  {
    type: 'textarea',
    field: 'content',
    label: '发布内容',
    otherOptions: {
      disabled: disabled
    }
  }
])

// 更新数据
const updateForm = (value: any) => {
  form.value = value
}

// 新增图片
const addImg = () => {}
</script>

<template>
  <div>
    <hy-form
      :model-value="form"
      :formItems="formProps"
      labelWidth="auto"
      :formLine="true"
      :colLayout="{ xl: 1 }"
      :itemStyle="itemStyle"
      @update:modelValue="updateForm"
    />
    <div class="flex justify-between">
      <div class="mr-3 flex flex-1">
        <span class="text-[--auxiliary]">照片</span>
        <svg-icon
          name="icon-system-button-tianjia"
          width="60px"
          height="60px"
          class="mx-3 rounded border border-[#365D84] p-3"
          @click="addImg"
        />
        <span class="text-xs text-[--auxiliary]">最多可上传9张</span>
      </div>
      <div class="grid w-1/2 grid-cols-5">
        <div v-for="(item, index) in form.photoList" :key="index">
          {{ item }}
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped></style>
